<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>学生管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/bootstrap/bootstrap.min.css" media="all">
  </head>
  <body style="font-size: 0.9rem;" class="m-3">
    <%--    搜索栏--%>
    <div class="d-flex">
      <div class="col-auto">
        <input id="stuName" value="" class="form-control form-control-sm " placeholder="请输入学生姓名"/>
      </div>
      <button id="searchBtn" class="layui-btn layui-btn-sm layui-btn-primary"><i
        class="layui-icon layui-icon-search"></i>搜索
      </button>
      <button id="resetBtn" class="layui-btn layui-btn-sm layui-btn-primary"
              style="border:1px solid #ff7670;color: #FF7670;"><i
        class="layui-icon layui-icon-close"></i>
        重置
      </button>
      <button id="addBtn" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-add-1"></i>新增</button>
    </div>
    <%--      列表容器--%>
    <table id="stuTable" lay-filter="stuTable"></table>
    <%--      顶部工具条--%>
    <script id="headbar" type="text/html">
    
    </script>
    <%--      行工具条--%>
    <script id="linebar" type="text/html">
      <a lay-event="edit" class="layui-btn layui-btn-xs layui-btn-normal"><i class="layui-icon layui-icon-edit"></i>编辑</a>
      <a lay-event="del" class="layui-btn layui-btn-xs layui-btn-danger"><i class="layui-icon layui-icon-edit"></i>删除
      </a>
    </script>
    <script src="${pageContext.request.contextPath}/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/lay-config.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/http.js" charset="utf-8"></script>
    <script>
        layui.use(['table', 'layer'], function () {
            var table = layui.table;
            var layer = layui.layer;
            //渲染表格
            table.render({
                elem: '#stuTable',
                url: '/student.do?method=list',
                height: 'full-80',
                toolbar: '#headbar',
                cols: [[
                    {field: 'collogeName', title: '学院'},
                    {field: 'majorName', title: '专业'},
                    {field: 'calssName', title: '班级'},
                    {field: 'stuName', title: '姓名'},
                    {field: 'phone', title: '电话'},
                    {field: 'idCard', title: '身份证'},
                    {field: 'sex', title: '性别'},
                    {field: 'stuNum', title: '学号'},
                    {field: 'joinYear', title: '入学年份'},
                    {title: '操作', toolbar: '#linebar', width: 150, align: 'center'}
                ]],
                page: true,
                limit: 10,
                limits: [10, 20, 30, 50]
            })
            //表格行工具条监听
            table.on('tool(stuTable)', function (obj) {
                console.log(obj)
                if (obj.event == 'edit') { //编辑
                    var index = layer.open({
                        title: '编辑学生',
                        type: 2,
                        skin: 'layui-layer-molv',
                        offset: '0px',
                        area: ['650px', '370px'],
                        content: '/student.do?method=editUI&stuId=' + obj.data.stuId,
                        btn: ['确定', '取消'],
                        btn1: function (index) {
                            var parms = window['layui-layer-iframe' + index].addParms();
                            if (parms) {
                                console.log(parms)
                                //发送请求
                                http.post("/student.do?method=editSave", parms, function (result) {
                                    if (result && result.code == 200) {
                                        layer.msg(result.msg)
                                        layer.close(index)
                                        //刷新表格
                                        reload();
                                    }
                                })
                            }

                        },
                        btn2: function (index) {

                        }
                    })
                }
                if (obj.event == 'del') {
                    layer.confirm('确定删除该数据吗?', {icon: 3, title: '系统提示'}, function (index) {
                        //do something
                        //发送请求
                        http.post("/student.do?method=delete", {stuId: obj.data.stuId}, function (result) {
                            if (result.code == 200) {
                                //刷新表格
                                reload();
                                layer.close(index);
                            }
                        })

                    });
                }
            })
            //新增按钮点击事件
            $("#addBtn").click(function () {
                //打开新增页面,使用layui的弹出层
                var index = layer.open({
                    title: '新增学生',
                    type: 2,
                    skin: 'layui-layer-molv',
                    offset: '0px',
                    area: ['650px', '370px'],
                    content: '/student.do?method=addUI',
                    btn: ['确定', '取消'],
                    btn1: function (index) {
                        var parms = window['layui-layer-iframe' + index].addParms();
                        if (parms) {
                            console.log(parms)
                            //发送请求
                            http.post("/student.do?method=addSave", parms, function (result) {
                                if (result && result.code == 200) {
                                    layer.msg(result.msg)
                                    layer.close(index)
                                    //刷新表格
                                    reload();
                                }
                            })
                        }

                    },
                    btn2: function (index) {

                    }
                })
            })

            //表格重载
            function reload() {
                table.reload('stuTable', {
                    where: { //设定异步数据接口的额外参数，任意设
                        stuName: $("#stuName").val()
                    },
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }

            //搜索按钮
            $("#searchBtn").click(function () {
                reload();
            })
            //重载按钮
            $("#resetBtn").click(function () {
                //清空搜索表单
                $("#stuName").val('');
                reload();
            })
        })
    </script>
  </body>
</html>
